<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="__CSS__/lib/normalize.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/mui-3.6.1.min.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/s-tui.css" />
    <title>申请退款</title>
    <style>
        input[type="text"],select,textarea{width: auto;height: auto;padding: 0;margin: 0;border:none;font-size: 100%}
        .col-red{color:red}
        .col-font{font-size:90%;color: #999}
        .img_list img{width: 32%;height: 8rem;margin-right: 1%}
        .upImg{width:90%; margin:10px auto 10px auto; text-align:right;padding:10px; border:#999 dashed 1px; background:url(__IMG__/upimg_ico.png) 10px center no-repeat; background-size:20px;}
    </style>
</head>

<body>
    <div class="mui-content">
        <div class="top-bar mui-row">
            <a  href="{$Think.get.ref}" class="return mui-col-sm-2 mui-col-xs-2"></a>
            <div class="top-middle mui-col-sm-8 mui-col-xs-8">
                <div class="s-top-middle">
                    申请退款
                </div>
            </div>
            <div class="top-right mui-col-sm-2 mui-col-xs-2"></div>
        </div>
    </div>

    <div class="tksm">
        说明:在商家接单中, 用户想要退款, 可以打电话给商家沟通, 如果商家同意退款, 即可取消订单, 并且退款。如果商家不同意退款, 用户可在订单完成后投诉商家, 平台客服会协助解决退款问题。
    </div>


    <div class="dpmz">店铺名字：<span>{$shopInfo.shopName}</span></div>
    <div class="dpmz">店主名字：<span>{$shopInfo.userName}</span></div>
    <div class="dpmz">联系电话：<span>{$shopInfo.userPhone}</span></div>

    <div style="margin-bottom: 10px;"></div>

    <div class="dpmz"><font class="col-red">*</font>退款原因：
        <select id="refundReason" style="width: auto">
            <option value="1">多拍/错拍/不想要</option>
            <option value="2">服务承诺</option>
            <option value="3">商品少件/破损/污渍等</option>
            <option value="4">功能未达到标准效果</option>
            <option value="5">质量问题</option>
            <option value="6">功能缺失</option>
            <option value="7">假冒品牌</option>
            <option value="8">外观/型号/参数与描述不符</option>
            <option value="9">卖家发错货</option>
            <option value="10">其它</option>
        </select>
    </div>

    <div class="dpmz">
        <font class="col-red">*</font>退款金额：<span id="refundMoney">{$orderInfo.needPay}</span>
        <font class="col-font">（含运费￥{$orderInfo.deliverMoney}）</font>
    </div>
    <div class="dpmz">退款说明：
        <input type="text" name="explain" id="explain" placeholder="填写退款说明">
    </div>

    <div class="img_list"></div>

    <div class="upImg col-font" id="unloadPic">
        上传凭证  最多3张
    </div>
    <!--<a href="tel:110110110110"><div class="tijiao"><img src="__IMG__/search/tel_03.png"/>呼叫商家</div></a>-->
    <div class="tijiao" onclick="subRefund()">提交订单</div>

    <input type="hidden" name="needPay" id="needPay" value="{$orderInfo['needPay']}"/>
    <input type="hidden" name="orderid" id="orderid" value="{$orderInfo['orderId']}"/>
    <input id="upLoadimg" type="hidden" name="upLoadimg" value=""/>
    <script type="text/javascript" src="__JS__/jquery2.1.1.min.js"></script>
    <script type="text/javascript" src="__JS__/s-tui.js"></script>
    <script type="text/javascript" src="__JS__/mui.js"></script>
    <script type="text/javascript" src="__JS__/ajaxupload.js"></script>

    <script>
        window.onload = function(){
            var oBtn = document.getElementById("unloadPic");
            new AjaxUpload(oBtn,{
                action:"{:U('Orders/refundUploadImg')}",
                name:"upload",
                onSubmit:function(file,ext){
                    if(ext && /^(jpg|jpeg|png|gif)$/.test(ext)){
                        //ext是后缀名
                        var img=$.trim($('#upLoadimg').val());
                        var arr=img.split('|');
                        if(arr.length>=3){
                            $('#unloadPic').text('已上传3张图片');
                            mui.toast('最多上传3张图片');
                            return false;
                        }
                        oBtn.disabled = "disabled";
                    }else{
                        mui.toast('仅支持.png .jpg .jpeg的图片');
                        return false;
                    }
                },
                onComplete:function(file,response){
                    //console.log(file+','+response);
                    if(response != "success"){
                        if(response =='2'){
                            mui.toast('图片格式错误');
                        }else{
                            if(response.length>45){
                                mui.toast('上传失败');
                            }else{
                                console.log(response);
                                $('.img_list').append('<img src="{:WEB_HOST}/'+response+'" />');
                                mui.toast('上传完成');
                                var temp=$('#upLoadimg').val();
                                $('#unloadPic').text('再上传一张图片');
                                if($('#upLoadimg').val()==''){
                                    $('#upLoadimg').val(response);
                                }else{
                                    $('#upLoadimg').val(temp+'|'+response);
                                }
                                var img=$.trim($('#upLoadimg').val());
                                var arr=img.split('|');
                                if(arr.length>=3){
                                    $('#unloadPic').text('已上传3张图片');
                                    mui.toast('已上传3张图片');
                                    return false;
                                }
                            }
                        }
                    }
                }
            });
        };





        function subRefund(){
            var orderid=$('#orderid').val();
            var needPay=$('#needPay').val();
            var resion=$("#refundReason").find("option:selected").text();
            var money =parseInt($('#refundMoney').text());
            var explain=$('#explain').val();
            var img=$('#upLoadimg').val();
            if(Number(needPay)<Number(money)){
                mui.toast('退款金额不对');
                return;
            }
            if(isNaN(money)){
                mui.toast('退款金额必须是数字');
                return;
            }
            if(Number(money)==0||Number(money)<0){
                mui.toast('请填写退款金额');
                return;
            }
            $.ajax({
                type: "POST",
                url:"{:U('Orders/applyRefund')}",
                data:{
                    id:orderid,
                    money:money,
                    resion:resion,
                    explain:explain,
                    img:img
                },
                success: function(data) {
                    if(data.status==-3){
                        mui.toast('请先登录 ');
                        return;
                    }else if(data.status==-1){
                        mui.toast('提交失败 ');
                        return;
                    }else if(data.status==-2){
                        mui.toast('请不要重复提交 ');
                        setTimeout(function(){
                            location.href="/Wx/Index/index/r/order";
                        },2000);
                        return;
                    }else if(data.status==-4||data.status==-5){
                        mui.toast('非法操作 ');
                        return;
                    }else if(data.status==0){
                        mui.toast('申请成功 ');
                        setTimeout(function(){
                            location.href="/Wx/Index/index/r/order";
                        },2000)
                        return;
                    }
                }
            });

        }
    </script>




</body>

</html>
